<template>

    <div class="manage_page fillcontain">
        <header class="el-header" style="height: 30px; background-color: #324057;">
            <span class="xiao_title">易链校</span>
        </header>
        <el-row>
        </el-row>
        <el-row style="height: 100%;">
            <el-col :span="3" style="min-height: 100%; background-color: #324057;">
                <el-row style="width:100%;margin-top: 20px;margin-bottom: 20px" type="flex" justify="center">
                    <el-button class="yi_btn_title" type="primary" circle>易</el-button>
                </el-row>
                <el-row style="width:100%;margin-top: 20px;margin-bottom: 20px" type="flex" justify="center">
                    <el-dropdown class="my_org" size="medium" split-button type="info" @click="handleClick">
                        {{mainorg.name}}
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="(item,index) in orglist" :key="index">{{item.name}}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-row>
                <el-menu background-color="#324057" class="menu-class" :default-openeds="['2']" @select="selectHandle"
                         :default-active="defaultActive" :collapse="isCollapse"
                         style="min-height: 100%; " theme="dark">
                    <el-menu-item index="manage"><i class="el-icon-menu"></i>首页</el-menu-item>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-document"></i><span style=""><span class="menu-title">学员管理</span></span>
                        </template>
                        <el-menu-item index="usermanage"><i class="el-icon-star-on"></i>学员列表</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-plus"></i><span class="menu-title">班级管理</span>
                        </template>
                        <el-menu-item index="classmanage"><i class="el-icon-star-on"></i>班级排课</el-menu-item>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title"><i class="el-icon-plus"></i><span class="menu-title">约课管理</span>
                        </template>
                        <el-menu-item index="schedulemanage"><i class="el-icon-star-on"></i>约课列表</el-menu-item>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title"><i class="el-icon-edit"></i><span class="menu-title">教师管理</span>
                        </template>
                        <el-menu-item index="employeeManage"><i class="el-icon-star-on"></i>教师列表</el-menu-item>
                    </el-submenu>
                    <el-submenu index="6">
                        <template slot="title"><i class="el-icon-setting"></i><span class="menu-title">请假管理</span>
                        </template>
                        <el-menu-item index="leavemanage"><i class="el-icon-star-on"></i>请假管理</el-menu-item>
                    </el-submenu>
                    <el-submenu index="7">
                        <template slot="title"><i class="el-icon-warning"></i><span class="menu-title">基础设置</span>
                        </template>
                        <el-menu-item index="basesetting"><i class="el-icon-star-on"></i>基础设置</el-menu-item>
                    </el-submenu>
                    <el-submenu index="8">
                        <template slot="title"><i class="el-icon-warning"></i><span class="menu-title">使用手册</span>
                        </template>
                        <el-menu-item index="explain"><a href="https://www.kancloud.cn/huntian9/testdoc/956031"
                                                         target="_blank"><span class="menu-title">使用手册</span></a>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>

            </el-col>
            <el-col :span="21" style="height: 100%;overflow: auto;">
                <div class="app-wrap">
                    <el-container class="container-area">
                        <el-header class="head-area" height="5%">
                            <el-row class="msg_line">
                                <el-col :span=18>
                                    <el-breadcrumb class="bread_crumb" separator-class="el-icon-arrow-right">
                                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                                        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                                        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                                        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                                    </el-breadcrumb>
                                </el-col>
                                <el-col :span=6><span class="time-line">{{time| dateFmt}}</span></el-col>
                            </el-row>
                        </el-header>
                        <el-main class="main-area">
                            <el-tabs
                                v-model="activeIndex"
                                @tab-click="tabClick"
                                v-if="options.length"
                            >
                                <el-tab-pane
                                    :key="item.rulename"
                                    v-for="(item, index) in options"
                                    :label="item.rulename"
                                    :name="item.rulepath">
                                </el-tab-pane>
                            </el-tabs>
                            <div class="content-wrap">
                                <router-view/>
                            </div>
                        </el-main>
                        <el-footer height="10%">
                            <el-row class="xb-footer" type="flex" justify="center">
                                elink管理平台
                            </el-row>

                        </el-footer>
                    </el-container>
                </div>
            </el-col>
        </el-row>
        <el-dialog ref="orgpanel" title="创建机构" :visible.sync="addOrgVisible">
            <add-org-view></add-org-view>
            <template slot="footer">
                <el-row type="flex" justify="end">
                    <el-button @click="dialogclose" type="info" plain size="mini">取消</el-button>
                    <el-button @click="addOrg" type="primary" plain size="mini">确认</el-button>
                </el-row>
            </template>
        </el-dialog>

    </div>
</template>

<script>
    import headTop from '../components/headTop'
    import {mapActions, mapState, mapMutations, mapGetters} from 'vuex'
    import {getRuleMenu, addOrgOper, orgList} from '@/api/getData'
    import addOrgView from '@/page/components/addOrgView'

    export default {
        mounted() {
          /*  setInterval( () =>{
                this.time = new Date()
            },1000)
            this.getMyOrgList();
*/

        },
        components: {
            headTop,
            addOrgView,
        },
        data() {
            return {
                time:null,
                isCollapse: false,
                mainorg: {id: 1, name: "聊城一中小学"},
                addOrgVisible: false,
                orglist: [{id: 1, name: "我的小学1"}, {id: 2, name: "我的小学2"}, {id: 3, name: "我的小学3"}, {
                    id: 1,
                    name: "我的小学1",
                    main: 1
                }],
                orgform: {},
            }
        },
        computed: {
            ...mapGetters(['userinfo', 'getCurrentOrgId', 'optionsMenu']),
            options() {
                return this.$store.state.options;
            },
            defaultActive: function () {
                return this.$route.path.replace('/', '');
            }
        },
        watch: {
            '$route'(to) {
            }
        },
        methods: {
            ...mapMutations(['add_manytabs', 'setMenuRles', 'saveAdminInfo']),
            ...mapActions(['getMyOrgList']),
            dialogclose: function () {
                this.addOrgVisible = false;

            },
            getMainOrg(orgList) {
                if (orgList == null || orgList == undefined)
                    return null;
                var org = orgList.find(item => item.main == 1);
                if (org == null || org == undefined)
                    return null;
                return org;
            },


            //添加
            async addOrg() {
                this.orgform = this.$refs.orgpanel.childForm;
                const res = await addOrgOper({"data": orgform});
                if (res.success == true) {
                    this.orglist.push(this.orgform);
                }
            },
            async initorglist() {
                const res = await orgList({"data": {uid: eid}});
                if (res.success == true) {
                    this.orglist = res.data;
                }
                this.mainorg = this.getMainOrg(this.orglist);
            },

            async getMenuRule(eid) {
                const res = await getRuleMenu({"data": {id: eid}});
                if (res.success == true) {
                    this.setMenuRles(res.data);
                }
            },
            showorg: function () {
                this.addOrgVisible = true;
            },
            selectHandle(key, keyPath) {
                console.info('key=' + key + ',keypath=' + keyPath);
                var list = this.optionsMenu[key];
                console.info('menlust=' + JSON.stringify(list));
                if (list != null) {
                    this.add_manytabs(list);
                    var first = list[0].rulepath;
                    this.activeIndex = first;
                    this.$router.push({path: first})
                }
                else {
                    this.$router.push({path: '/norule'});
                    return;
                }
            },
            tabClick(tab) {
                let path = this.activeIndex;
                this.$router.push({path: path});
            },

        }
    }
</script>


<style lang="less" scoped>
    @import '../style/mixin';

    a:link {
        color: black
    }

    a:visited {
        color: black
    }

    a:active {
        color: black
    }

    a:hover {
        color: black
    }

    .manage_page {
        height: 100%;
    }

    .el-table td {
        padding: 1px 0;
    }

    .add-org {
        height: 30px;
        width: 30px;
        color: #0083FF;
    }

    .el-menu-item, .el-submenu__title {
        height: 40px;
        line-height: 40px;
        color: white;
    }

    .el-submenu .el-menu-item {
        min-width: 50px;
    }

    el-tabs__content {
        padding-top: 2px;
        padding-right: 2px;
        padding-bottom: 2px;
        padding-left: 2px;
        padding: 1px;
    }

    .bread_crumb {
    }

    .menu_back {
        background-color: #324057;
    }

    .el-menu-item {
        font-size: 13px;
    }

    .el-submenu__title {
        font-size: 13px;
        /* color: #303133;*/
        color: white;
        padding: 0 20px;
        cursor: pointer;
        -webkit-transition: border-color .3s, background-color .3s, color .3s;
        transition: border-color .3s, background-color .3s, color .3s;
        box-sizing: border-box;
    }

    .menu-class {

    }

    .menu-title {
        font-size: 13px;
        color: white;
    }

    .xiao_title {
        font-size: 14px;
        font-weight: 600;
        color: #ffffff;
    }

    .xb-footer {
        margin-top: 20px;
        font-size:12px;
        color: #6f7180;
    }

    .main-area {
        border: solid 1px #e4e4e4;
        margin-top: 1%;
        margin-left: 5%;
        margin-right: 5%;
        height: 85%;
    }

    .head-area {
        position: relative;
        height: 10%;
    }

    .org-area {
        bottom: 2%;
        left: 20%;
    }

    .content-wrap {
        height: 100%;
    }

    .app-wrap {
        height: 100%;
    }

    .my_org {
        padding: 10px 15px;
        border-radius: 0px;
    }

    .yi_btn_title {
        background-color: #ffffff;
        border-color: #ffffff;
        width: 60px;
        color: #303133;
        height: 60px;
        font-size: 20px;
    }
    .msg_line {
        margin-top: 15px;
    }

    .container-area {
        height: 100%;
    }
    .time-line {
        font-size:15px;
        color: #8c939d;
        font-weight: bold;

    }
</style>
